<template>
	<view class="box-main">

		<!-- 项目顶部视频介绍 -->
		<view class="box-top-bg">
			<view>
				<image class="pos-r" style="width: 105%;height: 500rpx;top: 0rpx;left: -20rpx;" 
				src="https://yjgs.jsonbug.com/test/bg-12312.png" mode=""></image>
			</view>
			<view class="box-top-video">
				<view>
					<video style="height: 400rpx;width: 100%;"
						src="https://www.gywb.cn/upload/news/video/2024/08/27/524ac6fcc0744700be0d5b144a561067.mp4"></video>
				</view>
				<view class="mt-10 box-desc-top p-20 ">
					<view class="mt-10 ml-10">
						<text class=" fw" style="color: white;font-size: 46rpx;">蓝笔智慧校园</text>
					</view>
					<view style="color: white;" class="line-2 mt-5 ml-10">
						<text>赠送电子班牌入校，学校欢迎家长爱</text>
					</view>
				</view>
			</view>
		</view>
		<!-- end -->
		
		<view class="" style="height: 180rpx;">
			
		</view>

		<!-- 项目视频 / 为你推荐 -->
		<view class="box-content">
			<view class="flex ac">
				<view class="box-left-box">
					<text>项目视频</text>
				</view>
				<view @click="recommendClick" class="box-right-box">
					<text>为您推荐</text>
				</view>
			</view>

			<view v-for="(item,index) in 3" :key="index" class="box-for-list">
				<view class="mt-50 fw flex ac sb" style="font-size:42rpx ;">
					<view>
						<text>项目背景</text>
					</view>
					<view>
						<text class="iconfont icon-fenxiang1" style="font-size: 46rpx;"></text>
					</view>
				</view>
				<view class="mt-10 fw">
					<text style="color: #585858;">国家政策要求教育要”主动拥抱智能时代”</text>
				</view>
				<view class="mt-20">
					<video src="https://www.gywb.cn/upload/news/video/2024/08/27/524ac6fcc0744700be0d5b144a561067.mp4"
						style="width: 100%;height: 400rpx;"></video>
				</view>
			</view>
		</view>
		<!-- end -->

		<!-- 推荐 -->
		<view class="box-recommend">
			<view id='recommend' class="box-tui-box">
				<view class="box-tui-left">
					<text>推荐</text>
				</view>
				<view class="box-tui-right">
					<text>遇见贵商-为你推荐</text>
				</view>
			</view>
			<view class="mt-30">
				<view class="box-for-grid">
					<view v-for="(item,index) in 6" :key="index" class="box-for-tui">
						<view class="pos-r">
							<view>
								<image
									style="width: 100%; height: 180rpx;border-top-right-radius: 2rpx;border-top-left-radius: 2rpx;"
									src="https://image.meiye.art/pic_1628404037376?imageMogr2/thumbnail/560x/interlace/1"
									mode=""></image>
							</view>
							<view class="box-grid-video-img">
								<image src="../../../static/images/stop.png" style="width: 80rpx;height: 80rpx;">
								</image>
							</view>
						</view>

						<view class="tc fw pb-10">
							<text>知服科技</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- end -->


		<view style="height: 160rpx;">
		</view>

		<!-- 底部导航栏 -->
		<view class="box-bar sb">
			<view class="flex ac">
				<view class="flex ac jc fc">
					<view class="">
						<text class="iconfont-yjgs  " style="font-size: 46rpx;">
							&#xe6ea;
						</text>
					</view>
					<view>
						<text class="fs-22">电话咨询</text>
					</view>
				</view>
				<view class="flex ac jc fc ml-50">
					<view class="">
						<text class="iconfont-yjgs " style="font-size: 52rpx;color: #336DFF;">
							&#xe63e;
						</text>
					</view>
					<view>
						<text class="fs-22">分享</text>
					</view>
				</view>
			</view>

			<view class="flex ac" style=" width: 66%;">
				<view @click="toPageBack" class="box-bar-btn mr-20" style="flex: 1;background-color: #00A6FF;">
					查看图文详情
				</view>
				<view @click="interestClick" class="box-bar-btn " style="flex: 1;">
					我感兴趣
				</view>
			</view>

		</view>
		<!-- end -->
		
		
		<!-- 我感觉兴趣弹窗 -->
			<popRelation ref="popRelationRef"></popRelation>
		<!-- end -->

	</view>
</template>

<script>
	import popRelation from '@/pages/extend/components/popRelation/index.vue'
	export default {
		components:{
			popRelation
		},
		data() {
			return {

			}
		},
		methods:{
			toPageBack(){
				uni.navigateBack()
			},
			interestClick(){
				this.$refs.popRelationRef.popuplnterest('center')
			},
			recommendClick(){
				uni.pageScrollTo({
					selector:'#recommend',
					duration:200
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box-top-bg{
		top: -30rpx;
		position: relative;
	}
	.box-grid-video-img {
		top: 0rpx;
		margin-left: 50%;
		margin-top: 15%;
		transform: translateX(-50%);
		position: absolute;
	}

	.box-for-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 10rpx;
	}

	.box-for-tui {
		background-color: #F3F4F7;
	}

	.box-tui-right {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 70rpx;
		font-size: 34rpx;
		color: #FE6F58;
		font-weight: bold;
	}

	.box-tui-left {
		border-top-left-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
		color: white;
		font-weight: bold;
		font-size: 40rpx;
		text-align: center;
		line-height: 70rpx;
		min-width: 140rpx;
		height: 100%;
		background-color: #FE6F58;
	}

	.box-tui-box {
		margin-top: 60rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		height: 70rpx;
		width: 76%;
		border: 2rpx solid #FE6F58;
	}

	.box-recommend {
		background-color: white;
		margin-top: 26rpx;
		width: 100%;
		height: auto;
		border: 20rpx solid white;
	}

	.box-for-list {}

	.box-right-box {
		margin-left: 20rpx;
		color: #24375B;
		font-weight: bold;
		line-height: 70rpx;
		text-align: center;
		flex: 1;
		height: 70rpx;
		background-color: #F3F4F7;
	}

	.box-left-box {
		color: #FE6F58;
		font-weight: bold;
		line-height: 70rpx;
		text-align: center;
		flex: 1;
		height: 70rpx;
		background-color: #FFF1E0;
	}

	.box-content {
		padding: 20rpx;
		margin-top: 30rpx;
		width: 100%;
		background-color: white;
		height: auto;
	}

	.box-desc-top {
		border-radius: 6rpx;
		background-image: url('https://yjgs.jsonbug.com/test/bg-06.jpg');
		background-size: 100% 100%;
		height: 180rpx;
		width: 100%;
		background-color: #292929;
	}

	.box-top-video {
		top: 80rpx;
		position: absolute;
		background-color: white;
		margin-top: 10rpx;
		width: 100%;
		height: auto;
		border: 20rpx solid white;
	}

	.box-bar-btn {
		border-radius: 8rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		font-weight: 550;
		color: white;
		height: 100%;
		background-color: #0066FF;
	}

	.box-bar-btn:active {
		opacity: .5;
	}

	.box-bar {
		padding: 20rpx;
		box-sizing: border-box;
		border-top: 1px solid #F3F3F3;
		z-index: 9999;
		left: 0;
		box-shadow: 1px -3px 20rpx rgba(0, 0, 0, .12), 0 0 3rpx rgba(0, 0, 0, .04);
		color: #292929;
		display: flex;
		align-items: center;
		bottom: 0;
		position: fixed;
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		height: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.box-main {
		width: 100%;
		overflow-x: hidden;
		padding: 20rpx;
		height: auto;
		background-color: #3F7BFD;
	}
</style>